<template>
  <div class="pagination-container" :style="{ justifyContent: justify }">
    <el-pagination
      v-model:current-page="currentpage"
      v-model:page-size="currentsize"
      :total="total"
      :disabled="disabled"
      :size="size"
      :layout="layout"
      :background="background"
      :page-sizes="pageSizes"
      :pager-count="pagerCount"
      :hide-on-single-page="false"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup lang="ts">
defineProps({
  // 当前页
  pageNum: {
    type: Number,
    default: 1,
  },
  // 每页条数
  pageSize: {
    type: Number,
    default: 10,
  },
  // 总条数
  total: {
    type: Number,
    default: 0,
  },
  // 对齐方式
  justify: {
    type: String,
    default: "flex-end",
  },
  // 布局
  layout: {
    type: String,
    default: "total, sizes, prev, pager, next, jumper",
  },
  // 选择器大小
  size: {
    type: String,
    default: "default", // large | default | small
  },
  // 页码按钮的数量
  pagerCount: {
    type: Number,
    default: 7,
  },
  // 每页显示个数选择器的选项设置
  pageSizes: {
    type: Array,
    default: () => [10, 20, 30, 40, 50, 100],
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false,
  },
  // 背景色块
  background: {
    type: Boolean,
    default: true,
  },
});
const emit = defineEmits(["update:pageNum", "update:pageSize", "change"]);

const currentpage = defineModel("pageNum");
const currentsize = defineModel("pageSize");

// 分页大小改变
const handleSizeChange = (val: number) => {
  emit("update:pageSize", val);
  emit("update:pageNum", 1);
  emit("change", val);
};

// 当前页改变
const handleCurrentChange = (val: number) => {
  emit("update:pageNum", val);
  emit("change", val);
};
</script>
<style lang="scss" scoped>
.pagination-container {
  display: flex;
  margin-top: 1.25rem;
}
</style>
